<template>
  <div>

    <div class="search_bar clearfix">
      <a href="/" class="logo fl">
        <img src="../assets/images/logo.png" alt="" />
      </a>

      <div class="search_con fl">
        <input class="input_text fl" v-model="search" placeholder="搜索商品" />
        <input type="button" class="input_btn fr" value="搜索" @click="selectByName" />
      </div>

      <div class="guest_cart fr">
        <a href="/shop_cart" class="cart_name fl">我的购物车</a>
        <div class="goods_count fl" id="show_count">{{count}}</div>
      </div>
    </div>

    <div class="navbar_con">
      <div class="navbar clearfix">
        <div class="subnav_con fl">
          <h1>全部商品分类</h1>
          <span></span>
          <ul class="subnav">
            <li v-for="c in categoryArr">
              <a :href="'/list?categoryId=' + c.id" :class="c.cls">{{c.name}}</a>
            </li>
          </ul>
        </div>

        <ul class="navlist fl">
          <li><a href="/">首页</a></li>
          <li class="interval">|</li>
          <li><a href="/">手机生鲜</a></li>
          <li class="interval">|</li>
          <li><a href="/">抽奖</a></li>
        </ul>
      </div>
    </div>

    <div class="breadcrumb">
      <a href="#">全部分类</a>
      <span>></span>
      <a href="#">新鲜水果</a>
      <span>></span>
      <a href="#">商品详情</a>
    </div>

    <div class="goods_detail_con clearfix">
      <div class="goods_detail_pic fl">
        <img :src="product.image" width="350" alt="" />
      </div>

      <div class="goods_detail_list fr">
        <h3>{{product.name}}</h3>
        <p>{{product.description}}</p>
        <div class="prize_bar">
          <span class="show_pirze">¥<em>{{product.price}}</em></span>
          <span class="show_unit">单  位：{{product.unit}}</span>
        </div>

        <div class="goods_num clearfix">
          <div class="num_name fl">数 量：</div>

          <div class="num_add fl">
            <input class="num_show fl" v-model="cart.quantity" />
            <a href="javascript:void(0)" class="add fr" @click="plus">+</a>
            <a href="javascript:void(0)" class="minus fr" @click="subtract">-</a>
          </div>
        </div>

        <div class="total">
          总价：<em>{{ ((product.price * 100) * cart.quantity) / 100 }}元</em>
        </div>

        <div class="operate_btn">
          <a href="javascript:void(0)" class="buy_btn" @click="buy">立即购买</a>
          <a href="javascript:void(0)" class="add_cart" @click="toCart">加入购物车</a>
        </div>
      </div>
    </div>

    <div class="main_wrap clearfix">
      <div class="l_wrap fl clearfix">
        <div class="new_goods">
          <h3>新品推荐</h3>

          <ul>
            <li v-for="recommend in recommends">
              <a :href="'/detail?productId=' + recommend.id">
                <img :src="recommend.image" alt="" />
              </a>
              <h4><a :href="'/detail?productId=' + recommend.id">{{recommend.name}}</a></h4>
              <div class="prize">￥{{recommend.price}}</div>
            </li>
          </ul>
        </div>
      </div>

      <div class="r_wrap fr clearfix">
        <ul class="detail_tab clearfix">
          <li :class="parseInt(tabIndex) === 0 ? 'active' : ''" @click="selectTab(0)">商品介绍</li>
          <li :class="parseInt(tabIndex) === 1 ? 'active' : ''" @click="selectTab(1)">评论</li>
        </ul>

        <div class="tab_content">
          <dl v-if="parseInt(tabIndex) === 0">
            <dt>商品详情：</dt>
            <dd>{{product.detail}}</dd>
          </dl>

          <dl v-if="parseInt(tabIndex) === 1">
            <div class="pinln" v-for="comm in comments">
              <div class="xinx">
                <div class="text">
                  {{comm.content}}
                </div>

                <div class="tm-m-photos">
                  <ul class="tm-m-photos-thumb">
                    <li v-for="image in comm.images">
                      <img :src="image.image" alt="" />
                    </li>
                  </ul>
                </div>

                <div class="time">{{comm.created}}</div>
              </div>

              <div class="fenlei">颜色分类：<span>深蓝色</span></div>

              <div class="name">{{comm.user.nickname}}</div>
            </div>
          </dl>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {error, getData, postForm} from "@/assets/js/axiosUtis";

  export default {
    data() {
      return {
        count: 0,
        search: "", // 搜索关键字
        tabIndex: 0, // 选项卡下标
        productId: "",
        cart: { // 购物车
          productId: "",
          money: "",
          quantity: 1
        },
        product: {}, // 商品
        comments: [], // 商品的评论
        recommends: [], // 新品推荐
        categoryArr: [] // 全部商品类型
      }
    },
    created: function () {
      let _this = this;
      // 获取路由参数
      let productId = _this.$route.query.productId;

      // 获取购物车里的商品数量
      getData("/shop_cart/selectCount", {}
        , function (response) {
          let result = response.data;

          _this.count = result.data;
        },function (err) {
          error(err);
        }
      );

      if (productId) {
        _this.productId = productId;

        getData("/product/selectById", {
            id: productId
          }, function (response) {
            _this.product = response.data;

            // 设置购物车中商品id和金额
            _this.cart.productId = _this.product.id;
            _this.cart.money = ((_this.product.price * 100) * _this.cart.quantity) / 100;
          }, function (err) {
            error(err);
          }
        );
      }

      // 全部商品评论
      getData("/comment/selectByProductId", {
          productId: _this.productId
        }, function (response) {
          _this.comments = response.data;
        }, function (err) {
          error(err);
        }
      );

      // 全部商品分类
      getData("/category/selectAll", {}
        , function (response) {
          _this.categoryArr = response.data;
        }, function (err) {
          error(err);
        }
      );

      // 购物车里的商品数量
      getData("/shop_cart/selectCount", {}
        , function (response) {
          let result = response.data;

          _this.count = result.data;
        }, function (err) {
          error(err);
        }
      );

      // 新品推荐
      getData("/product/selectNew", {}, function (response) {
        _this.recommends = response.data;
      }, function (err) {
        error(err);
      });
    },
    methods: {
      selectByName() {
        location.href = "/list?name=" + this.search;
      },
      plus() { // 加
        if (this.cart.quantity + 1 <= this.product.quantity) {
          this.cart.quantity ++;
        }
      },
      subtract() { // 减
        if (this.cart.quantity > 1) {
          this.cart.quantity --;
        }
      },
      /**
       * 购买
       */
      buy() {
        // 添加到购物车
        postForm("/shop_cart/insert", this.cart
          , function (response) {
            let result = response.data;

            location.href = "/place_order?cartId=" + result.data;
          }, function (err) {
            error(err);
          }
        );
      },
      /**
       * 选中tab
       * @param index
       */
      selectTab(index) {
        this.tabIndex = index;
      },
      toCart() { // 加入购物车
        let _this = this;

        // 添加到购物车
        postForm("/shop_cart/insert", _this.cart, function () {
          // 重新查询购物车里的商品数量
          getData("/shop_cart/selectCount", {}
            , function (response) {
              let result = response.data;

              _this.count = result.data;
            }, function (err) {
              error(err);
            }
          );
        }, function (err) {
          error(err);
        });
      },
    },
    name: "DetailView",
  }
</script>